import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { listType } from '../../app/lists'
import axios from 'axios'
import './index.css'
import { StarO } from '@react-vant/icons';
const Text: React.FC = () => {
  const location = useLocation()
  const id: string = location.pathname.slice(5)
  const [item, getItem] = useState<listType>({
    url: '',
    name: '',
    title: '',
    id: '',
    isFinite:false,
    children: []
  })
  const itemGetlist = async () => {
    const resp = await axios.get('/api/item', { params: { id: id } })
    getItem(resp.data.item)
  }
  const isFiniteClick=(id:string)=>{
    axios.get('/api/isFinite', { params: { id: id } })
    itemGetlist()
  }
  useEffect(() => {
    itemGetlist()
  }, [id])
  return (
    <div className='text'>
      <div className="text-main">
        <div className='text-main-nav'>
          {/* 11.正确展示详情所需的数据12:12 */}
          <div><img src={item.url} alt="" /><span>{item.name}</span></div>
          <div>{item.title}</div>
          <div>{item.children.length}条回答</div>
        </div>
        <div className='text-main-main'>
          {
            item.children.map(v => {
              return <div key={v.id} className="text-item">
                <div><img src={v.url} alt="" /><span>{v.name}</span></div>
                <div>{v.title}</div>
              </div>
            })
          }
        </div>
      </div>
      <div className="text-footer">
          <div><input type="text" /></div>
          {/* 13.正确实现收藏、取消收藏功能12:12 */}
          <div className={item.isFinite?'chou active':'chou'} onClick={()=>isFiniteClick(item.id)}><StarO  /></div>
          <div></div>
      </div>
    </div>
  )
}

export default Text